<template>
  <div class="grid-container">
    <div class="box-wrapper">
      <div class="box-wrapper-inner">
        <div class="cn-logo">
          <img
            src="../assets/image/logo-vertical-color-lightCN.2cID7.svg"
            alt=""
          />
        </div>
        <div class="login-input-container">
          <input v-model="username" type="text" placeholder="用户名" />
          <input v-model="password" type="password" placeholder="密码" />
        </div>
        <div class="submit">
          <button @click="goLogin">登录</button>
        </div>
        <Dengl />
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Dengl from "../components/dengl.vue";
import Footer from "../components/footer.vue";
import { reqLogin } from "../api/index";
export default {
  components: { Footer, Dengl },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    // 获取用户数据
    async goLogin() {
      let obj = { username: this.username, password: this.password };
      const res = await reqLogin(obj);
      if (res.code == 200) {
        // 调用vuex的mutations,修改登录状态
        // this.$store.commit("loginOK", true);
        // 将islogin与name存入sessionStorage
        sessionStorage.setItem("islogin", true);
        sessionStorage.setItem("name", this.username);
        this.$toast("登录成功");
        this.$router.push("/");
      } else {
        this.$toast.fail("用户名或密码错误");
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/login.css");
</style>
